import {messages} from "share/common";
import React from 'react'
import {connect} from 'react-redux'
import { Tabs, Affix, Button } from 'antd';
import Condition from 'components/condition';
import 'styles/setting/wait-for-billing/invoice-status-query.scss';
import BasisInfo from 'containers/financial-account/interface-definition/basis-info';
import BusinessTypeDefinition from 'containers/financial-account/interface-definition/business-type-definition';
import AccountSceneDefinition from 'containers/financial-account/interface-definition/account-scene-definition';
import DebitCreditDefinition from 'containers/financial-account/interface-definition/debit-credit-definition';
import RuleDefined from 'containers/financial-account/interface-definition/rule-defined';
import menuRoute from 'routes/menuRoute'
const TabPane = Tabs.TabPane;
const If = Condition.If;

class interfaceDefinitionDetail extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      status: 'business-type-definition',
      tabs: [
        {key: 'business-type-definition', name: messages('financial-account.key90')/*核算业务类型定义*/},
        {key: 'basics-info', name: messages('financial-account.key174')/*基础属性信息*/},
        {key: 'accounting-background-definition', name: messages('financial-account.key91')/*核算场景定义*/},
        {key: 'loan-direction-definition', name: messages('financial-account.key92')/*借贷方向定义*/},
        {key: 'rule-defined', name: messages('financial-account.key175')/*规则定义*/}
      ],
      recordInfo: props.businessInterface
    }
  }

  componentWillMount() {
    const { tab } = this.props.params;
    if(tab && tab !== ':tab'){
      this.setState({ status: tab });
    }
  }

  onChangeTabs = (value) => {
    this.setState({status: value});
  };

  goBack = () => {
    this.context.router.push(menuRoute.getRouteItem('interface-definition').url);
  };

  render(){
    const { status, tabs, recordInfo } = this.state;
    return(
      <div className="invoice-status">
        <Tabs type="card" onChange={this.onChangeTabs} defaultActiveKey={status}>
          {
            tabs.map(item => {
              return <TabPane tab={item.name} key={item.key}/>;
            })
          }
        </Tabs>
        <If value={status === 'business-type-definition'}>
          <BusinessTypeDefinition recordInfo={recordInfo}/>
        </If>
        <If value={status === 'basics-info'}>
          <BasisInfo recordInfo={recordInfo}/>
        </If>
        <If value={status === 'accounting-background-definition'}>
          <AccountSceneDefinition recordInfo={recordInfo}/>
        </If>
        <If value={status === 'loan-direction-definition'}>
          <DebitCreditDefinition recordInfo={recordInfo}/>
        </If>
        <If value={status === 'rule-defined'}>
          <RuleDefined recordInfo={recordInfo}/>
        </If>
        <Affix offsetBottom={0} className="bottom-bar">
          <Button onClick={this.goBack}>{messages('common.back')/*返回*/}</Button>
        </Affix>
      </div>
    )
  }
}

interfaceDefinitionDetail.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state){
  return {
    businessInterface: state.financialAccount.businessInterface
  }
}

export default connect(mapStateToProps)(interfaceDefinitionDetail);
